* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  color: #fff;
}
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  filter: contrast(30);
  background-color: #2c3e50;
}
.drop {
  width: 100px;
  height: 100px;
  background-color: #fff;
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  animation: drop 1.5s infinite linear;
}
.drop:nth-child(1) {
  transform: translateY(-160px) scale(0.7);
  animation-delay: 0.3s;
}
.drop:nth-child(2) {
  transform: translateY(-180px) scale(0.6);
  animation-delay: 1.3s;

}
.drop:nth-child(3) {
  transform: translateY(-220px) scale(0.4);
  animation-delay: 1.9s;
  \
}
@keyframes drop {
  to {
    transform: translateY(0px) scale(0.7);
  }
}
